<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css">
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            font-size: 10px;
            background-color: grey;
        }
        
        .fa {
            position: fixed;
            right: 0px;
            top: 0px;
            font-size: 3rem;
            z-index: 2;
        }
        
        .help {
            width: 10rem;
            height: 25rem;
            position: fixed;
            right: 0;
            top: -30rem;
            /*right: -30rem;
            top: 0;*/
            padding-top: 3rem;
            background-color: white;
            transition: top 1s;
        }
        
        .help p {
            font-size: 1.6rem;
        }
        
        input[type="checkbox"] {
            position: fixed;
            right: 0;
            top: 0;
            width: 3rem;
            height: 3rem;
            z-index: 3;
            opacity: 0;
        }
        
        input[type="checkbox"]:checked+div {
            /*right: 0;*/
            top: 0;
        }
    </style>
</head>

<body>
    <i class="fa fa-question" aria-hidden="true"></i>
    <input type="checkbox">
    <div class="help">
        <h1>帮助文档</h1>
        <p>懒人之家致力于网页脚本代码以及Flash素材的收集与整理,努力为国内前端工作者提供最全面的素材,帮您节约时间做更多的事情!</p>
    </div>
</body>

</html>